<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkForm() {
            let username = document.getElementById("username");
            let value = username.value;
            let password = document.getElementById("password");
            let pwdValue = password.value;

            let reg = /^[a-zA-Z0-9]{3,13}$/;
            let flag = true;

            if(reg.test(value)){
                let msg = document.getElementById("usernameMsg");
                msg.innerHTML = "<font color='green'>√</font>";
            }else{
                let msg = document.getElementById("usernameMsg");
                msg.innerHTML = "<font color='green'>×输入格式有误</font>";
                flag = false;
            }

            if(reg.test(pwdValue)){
                let msg = document.getElementById("passwordMsg");
                msg.innerHTML = "<font color='green'>√</font>";
            }else{
                let msg = document.getElementById("passwordMsg");
                msg.innerHTML = "<font color='green'>×输入格式有误</font>";
                flag = false;
            }

            return flag;
        }
    </script>
</head>
<body>
    <!-- 给表单绑定表单提交事件 -->
    <form action="#" onsubmit="return checkForm()">
        用户名: <input type="text" name="username" id="username" value="tom"/>
        <span id="usernameMsg"></span>
        <br>
        密码: <input type="password" name="password" id="password" value="123"/>
        <span id="passwordMsg"></span>
        <br>
        <input type="submit" value="提交">
    </form>
</body>
</html>